<template>
  <view class="login-page">
    <image
      src="../../static/bg.jpg"
      mode="aspectFit"
      class="login-page-bg"
    ></image>
    <form class="login" @submit="formSubmit">
      <view class="item h-flex-x">
        <view>手机：</view>
        <view class="h-flex-item-grow">
          <input
            type="number"
            name="phone"
            maxlength="11"
            value="13815408225"
            placeholder="请输入手机号码"
          />
        </view>
      </view>
      <view class="item h-flex-x">
        <view>密码：</view>
        <view class="h-flex-item-grow">
          <input
            type="text"
            name="password"
            password="true"
            maxlength="16"
            value="ab123456"
            placeholder="请输入密码 6~16位(字母/数字/下划线)"
          />
        </view>
      </view>
      <view class="item">
        <button type="primary" form-type="submit">登录</button>
      </view>
    </form>
  </view>
</template>

<script>
import commonUtil from "@/store/commonUtil.js";
import { postUserLogin } from "@/api";
export default {
  data() {
    return {
      appImgs: {},
    };
  },
  onLoad() {},
  methods: {
    formSubmit: function (e) {
      let formdata = e.detail.value;
      console.log("formdata", formdata);
      // 校验手机号码和密码是否输入
      if (!formdata.phone || !/^[1][3-9]\d{9}$/.test(formdata.phone)) {
        commonUtil.toast("请输入正确的手机号");
        return false;
      }
      if (!formdata.password) {
        commonUtil.toast("请输入6-16位的字母、数字、和特殊字符组合");
        return false;
      }

      postUserLogin(formdata).then((res) => {
        if (res.code === 20000) {
          commonUtil.toast("登录成功");
          commonUtil.saveItem("token", res.data.token);
          uni.navigateBack(); // 返回上一页
        } else {
          commonUtil.toast(res.message);
        }
      });
    },
  },
};
</script>

<style lang="scss">
.login-page {
  font-size: 28rpx;
  color: #333;
  width: 100%;
  height: 100vh;
  position: relative;

  .login-page-bg {
    width: 100%;
    height: 100%;
  }
}

.login {
  display: block;
  // background-color: rgba(255, 255, 255, 0.6);
  padding: 30rpx;
  position: absolute;
  z-index: 1;
  width: 70%;
  height: 100%;
  box-sizing: border-box;
  top: 0;
  left: 15%;

  .item {
    padding: 10rpx 0;
    color: #fff;
    input {
      height: 90rpx;
      display: block;
      width: 100%;
      font-size: 28rpx;
      letter-spacing: 1px;
      color: #fff;
    }

    & + .item {
      border-top: #eee solid 1px;
    }
  }
}

.bg {
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.box {
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding-top: var(--status-bar-height);
}
</style>